<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加动作</title>
    <div th:include="layout/resources :: resources"></div>
    <script th:src="@{/plugins/jsonlint/json2.js}"></script>
    <script th:src="@{/plugins/jsonlint/jsonlint.js}"></script>
    <script th:src="@{/plugins/jsonlint/auto-line-number.js}"></script>
    <style>
        textarea {
            width: 100%;
            background-color: #EAEAEA;
            border: none;
            height: auto;
            padding: 5px;
            line-height: 23px;
            overflow: auto;
            color: #666;
            font-size: 16px;
            font-family: "微软雅黑"
        }

        textarea:focus {
            box-shadow: 0 0 1px 1px #3e4ef9;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <form role="form" id="form">
        <div class="form-group">
            <div class="row" id="action">
                <div class="col-sm-6"><label>动作</label> <textarea
                        name="jsonAction"
                        type="text" class="text-info"
                ></textarea>
                </div>
                <div class="col-sm-6">
                    <button type="button" onclick="add();" class="btn btn-default">添加</button>
                    <button type="button" id="check-btn" class="btn btn-default">校验</button>
                    <input type="checkbox" value="yes" checked id="reformat"/><label for="reformat">格式化</label>
                    <button type="button" id="demo-btn" class="btn btn-default">使用模板</button>
                    <h2>校验结果</h2>
                    <pre id="result" style="height:100px;"></pre>
                </div>
            </div>
        </div>
    </form>

</div>
</body>
<script th:inline="javascript">
    $(function () {
        init();
        addEvent();
    })
    function init() {
        $("#check-btn").hide();
        $("[name='jsonAction']").height(parent.$(".layui-layer-iframe").height() - 100);
        $("[name='jsonAction']").setTextareaCount({
            width: "30px",
            bgColor: "#999",
            color: "#FFF",
            display: "block"
        });
        $("[name='demo']").height(parent.$(".layui-layer-iframe").height() - 310);

        $.ajax({
            method: "get",
            url: createUrl("/fun/action/get/[[${fun}]]/" + [[${flowId}]]),
            success: function (result) {
                $("[name='jsonAction']").val(JSON.stringify(result, null, 4));
            }
        })

    }

    function addEvent() {
        $("#check-btn").on('click', (function () {
            try {

                var resultObj = jsonlint.parse($("[name='jsonAction']").val());
                if (resultObj) {
                    $("#result").html("格式正确");
                    if ($("#reformat").is(':checked')) {
                        $("[name='jsonAction']").val(JSON.stringify(resultObj, null, 4));
                    }
                }
            } catch (e) {
                $("#result").html(e);
            }
        }));

        $("#demo-btn").on('click', (function () {
            $("[name='jsonAction']").val('{"pkgName":"com.android.chrome","url":"http://www.iqiyi.com/v_19rr74zlfw.html","steps":[{"stepType":1,"url":null,"stepX":0,"stepY":0,"viewType":"","viewID":"","placeholder":"","btnText":"登录","viewText":"","sleepTime":{"min":5,"max":18},"interfaceInfo":null,"accountLimit":{"startDate":null,"endDate":null}}]}');
            $("#check-btn").trigger("click");
        }));

        $("[name='jsonAction']").bind('input propertychange', function () {
            $("#check-btn").trigger("click");
        });
    }
    function add() {
        if ($("#result").html() != "格式正确") {
            framework.alert("格式不正确");
        }

        $.ajax({
            method: "post",
            url: createUrl("/fun/action/add/[[${fun}]]/" + [[${flowId}]]),
            data: $("form").serialize(),
            success: function (result) {
                if (result.success) {
                    parent.refresh();
                    framework.alert("添加成功");
                } else {
                    framework.alert("添加失败:" + result.error);
                }
                parent.layer.close(index);
            }
        })
    }
</script>
</html>
